<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common2::common(title='库')">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

</head>
<style type="text/css">
body {
	margin: 0;
}

.el-header, .el-footer {
	background-color: #545c64;
	color: white;
	text-align: center;
	line-height: 60px;
}
.box-card {
   margin-left:10%;
   margin-right:10%;
 }
.el-aside{
	padding:20px;
}
.el-table__row:hover   {cursor:pointer;}
</style>
<script type="text/javascript" th:src="@{/js/homeFrontend.js}"></script>
<body>
	<div id="app">
		<el-container> 
			<el-header> 
				<el-menu
					:default-active="1" class="el-menu-demo" mode="horizontal"
					background-color="#545c64" text-color="#fff"
					active-text-color="#ffd04b">
					<el-submenu index="1">
						<template slot="title"><span sec:authentication="principal.nickName"></span></template>
						<el-menu-item index="1-1" @click="goBackend">管理后台</el-menu-item>
					</el-submenu>
				</el-menu> 
			</el-header>
			<el-container> 
				<el-aside width="50%">
					<el-card class="box-card">
						<div slot="header">
						    <span>用例库</span>
						    <el-button style="float: right;" type="primary" size="small" @click="openDialog">新建用例库</el-button>
						</div>
					  	<div style="margin:10px;">
				    	  <el-table  
				    	  	ref="caseProjectDatagrid" 
				    	    :data="datagrid"
						    tooltip-effect="dark"
						    style="width: 100%;"
						    height="500"
						    @row-click="datagridSelect"
						    highlight-current-row
						    >
							   <el-table-column prop="id" label="用例库ID"> </el-table-column>
							   <el-table-column prop="name" label="用例库名称"> </el-table-column>
						  </el-table>
						</div>
						<div style="margin:10px">
						    <el-pagination
						      :current-page="queryData.page"
						      :page-sizes="[50, 80, 100]"
						      :page-size="queryData.rows"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="queryData.totalNum"
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      @prev-click="handlePrevClick"
						      @next-click="handleNextClick">
						    </el-pagination>
						 </div>
					</el-card>
				</el-aside>
				<el-main>
					<el-card class="box-card">
						<div slot="header">
						    <span>任务</span>
						    <el-button style="float: right;" type="primary" size="small" @click="openTaskDialog">新建任务</el-button>
						</div>
					  	<div style="margin:10px;">
				    	  <el-table  
				    	  	ref="caseTaskDatagrid" 
				    	    :data="taskDatagrid"
						    tooltip-effect="dark"
						    style="width: 100%;"
						    height="500"
						    @row-click="taskDatagridSelect"
						    highlight-current-row
						    >
							   <el-table-column prop="name" label="任务名称"> </el-table-column>
						  </el-table>
						</div>
						<div style="margin:10px">
						    <el-pagination
						      :current-page="queryTaskData.page"
						      :page-sizes="[50, 80, 100]"
						      :page-size="queryTaskData.rows"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="queryTaskData.totalNum"
						      @size-change="taskHandleSizeChange"
						      @current-change="taskHandleCurrentChange"
						      @prev-click="taskHandlePrevClick"
						      @next-click="taskHandleNextClick">
						    </el-pagination>
						 </div>
					</el-card>
				</el-main>
			</el-container>
		</el-container>
		<el-dialog :visible.sync="projectAddDialogVisible" center="true">
			<el-form :model="addProject" ref="projectAddForm" :rules="rules">
				<el-form-item label="用例库名称" prop="name" 
		      		label-width="120px">
			      <el-input v-model="addProject.name"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="closeDialog()">取 消</el-button>
			   		<el-button type="primary" @click="submitForm()">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="taskAddDialogVisible" center="true">
			<el-form :model="addTask" ref="taskAddForm" :rules="rules">
				<el-form-item label="任务名称" prop="name" 
		      		label-width="120px">
			      <el-input v-model="addTask.name"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="closeTaskDialog()">取 消</el-button>
			   		<el-button type="primary" @click="submitTaskForm()">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
	</div>
</body>
</html>